<template>
	<view class="cleanerinfo">
		<view class="info-box">
			<u-form :model="cleanerForm" ref="cleaneRef" label-width="150" :border-bottom="false">
				<view class="item-box">
					<u-form-item :border-bottom="false" prop="name">
						<view class="input-box">
							<view class="input-left title">姓名</view>
							<view class="input-right">
								<u-input v-model="cleanerForm.name" placeholder="请输入姓名" maxlength="10" />
							</view>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false" prop="idcard">
						<view class="input-box">
							<view class="input-left title">身份证号</view>
							<view class="input-right">
								<u-input v-model="cleanerForm.idcard" placeholder="请输入身份证号" maxlength="20" />
							</view>
						</view>
					</u-form-item>
				</view>


				<view class="item-box item-boxtwo">
					<u-form-item :border-bottom="false" prop="images">
						<view class="title">请拍摄本人实拍照片</view>
						<view class="img-box">
							<block v-for="(item,i) in cleanerForm.images" :key="i">
								<image v-if="cleanerForm.images[0]" :src="item" mode="aspectFill" class="img"></image>
							</block>
							<view class="take" @click="dotake">
								<image src="/static/image/take.svg" mode="" class="take-icon"></image>
							</view>
						</view>
						<view class="req-box">
							<view class="title">拍摄要求</view>
							<view class="reqtxt">
								提示：正面、免冠、素颜、清晰光线良好、背景整洁、可上传<text class="txt">多张，可上传工作照</text>
							</view>
						</view>
					</u-form-item>
				</view>

				<view class="item-box">
					<u-form-item :border-bottom="false" prop="front">
						<view class="input-box" @click="ToPhoto">
							<view class="input-left title">资质照片</view>
							<view class="input-right">{{ cleanerForm.front ? '已上传' : '身份证 从业资质 健康证' }}</view>
							<view class="input-icon">
								<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
							</view>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false" prop="introduction">
						<view class="input-box" @click="ToBrief">
							<view class="input-left title">个人简介</view>
							<view class="input-right">{{ cleanerForm.introduction ? '已上传' : '还没有个人简介,快来填写吧' }}</view>
							<view class="input-icon">
								<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
							</view>
						</view>
					</u-form-item>
				</view>

				<view class="item-box item-boxfor">
					<u-form-item :border-bottom="false" prop="works_times">
						<view class="input-box" @click="ToUptime">
							<view class="input-left title">服务时间</view>
							<view class="input-right">{{ cleanerForm.works_times ? '已上传' : '立即设置' }}</view>
							<view class="input-icon">
								<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
							</view>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false" prop="work_city">
						<view class="input-box" @click="ToPlace">
							<view class="input-left title">接单位置</view>
							<view class="input-right">{{ cleanerForm.work_city || '立即设置' }}</view>
							<view class="input-icon">
								<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
							</view>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false" prop="tel">
						<view class="input-box">
							<view class="input-left title">接单手机</view>
							<view class="input-right">
								<u-input v-model="cleanerForm.tel" placeholder="请输入手机号" maxlength="11" />
							</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<button class="btn" @click="dosubmit">提交信息</button>
		</view>
	</view>
</template>

<script>
	import { ResRecruit } from '@/untils/api.js'
	export default {
		data() {
			return {
				cleanerForm: {
					name: '', // 姓名
					idcard: '', // 身份证号
					images: [], // 本人照片
					front: '', // 身份证人像
					qualification: '', // 资质照片
					introduction: '', //个人简介
					works_times: '', //服务时间
					work_city: '', // 接单位置
				},
				rules: {
					name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
					idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' },
						{
							pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '身份证号码格式不对',
							trigger: 'blur'
						}
					],
					front: [{ required: true, message: '请上传身份证人像', trigger: 'blur' }],
					introduction: [{ required: true, message: '请上传个人简介', trigger: 'blur' }],
					works_times: [{ required: true, message: '请上传服务时间', trigger: 'blur' }],
					work_city: [{ required: true, message: '请上传接单位置', trigger: 'blur' }],
					tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },
						{
							pattern: /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/,
							message: '手机号码格式不对',
							trigger: 'blur'
						}
					]
				},

			}
		},
		onReady() {
			this.$refs.cleaneRef.setRules(this.rules);
		},
		onShow() {
			// this.cleanerForm = JSON.parse(uni.getStorageSync('cleanerForm'))
			uni.$on('upimage', (data) => {
				this.cleanerForm.front = data.front
				this.cleanerForm.back = data.back
				this.cleanerForm.qualification = data.qualification
				this.cleanerForm.health = data.health
				this.cleanerForm.flair = data.flair
				console.log(data, '---');
			})
			uni.$on('upinfo', (data) => {
				this.cleanerForm.education = data.education
				this.cleanerForm.notion = data.notion
				this.cleanerForm.height = data.height
				this.cleanerForm.weight = data.weight
				this.cleanerForm.introduction = data.introduction
			})
			uni.$on('uptime', (data) => {
				this.cleanerForm.week = data.week
				this.cleanerForm.works_times = data.works_times
			})
			uni.$on('upcity', (data) => {
				this.cleanerForm.work_city = data
			})
		},
		onLoad(option) {
			let infodata = JSON.parse(option.data)
			this.cleanerForm.name = infodata.name
			this.cleanerForm.gender = infodata.gender
			this.cleanerForm.tel = infodata.tel
			this.cleanerForm.home_city = infodata.home_city
			this.cleanerForm.type = infodata.type
		},
		methods: {
			dotake() {
				let _that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.images.push(group.data.fullurl)
							}
						})
					}
				})
			},
			dosubmit() {
				this.$refs.cleaneRef.validate(async (valid) => {
					if (!valid) return
					if (!this.cleanerForm.images[0]) return uni.$showMsg('请上传本人实拍照片')
					console.log(this.cleanerForm, '---------')
					const { data: res } = await ResRecruit(this.cleanerForm)
					console.log(res, '保洁师招募');
					uni.navigateBack()
				})
			},
			ToPlace() {
				uni.navigateTo({
					url: '/pages/Cleaner/Place'
				})
			},
			ToUptime() {
				uni.navigateTo({
					url: '/pages/Cleaner/Uptime'
				})
			},
			ToBrief() {
				uni.navigateTo({
					url: '/pages/Cleaner/Brief'
				})
			},
			ToPhoto() {
				uni.navigateTo({
					url: '/pages/Cleaner/Photo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cleanerinfo {
		padding: 0 24rpx;
		background-color: #f7f7f7;
		overflow: hidden;

		// 表单盒子
		.info-box {
			margin-top: 20rpx;

			// 公共
			.title {
				font-size: 26rpx;
				font-weight: 700;
			}


			.item-box {
				border-radius: 24rpx;
				background-color: #fff;
				margin-top: 20rpx;
				padding: 0rpx 30rpx 35rpx 25rpx;

				/deep/.u-form-item {
					padding-bottom: 0;
				}

				.input-box {
					display: flex;
					position: relative;

					.input-left {
						width: 150rpx;
					}

					.input-right {
						flex: 1;
						border-bottom: 1px solid #F0EDED;
						padding-bottom: 20rpx;
						color: #c0c4cc;
					}

					.input-icon {
						position: absolute;
						top: 0;
						right: 10rpx;
						z-index: 99;
					}
				}

			}

			// 照片
			.item-boxtwo {
				padding-top: 38rpx;

				/deep/.u-form-item {
					line-height: 0 !important;
				}

				.img-box {
					display: flex;
					flex-wrap: wrap;
					margin: 24rpx 0 10rpx;
					padding: 0 0 20rpx 20rpx;

					.take,
					.img {
						width: 180rpx;
						height: 180rpx;
						background: #F7F7F7;
						border-radius: 11rpx;
						margin: 20rpx 20rpx 0 0;
					}

					.take {
						display: flex;
						justify-content: center;
						align-items: center;

						.take-icon {
							width: 45rpx;
							height: 37rpx;
						}
					}

				}

				.req-box {
					.reqtxt {
						height: 86rpx;
						line-height: 30rpx;
						padding: 15rpx 60rpx 0 28rpx;
						margin-top: 20rpx;
						color: #01C3A8;
						font-size: 20rpx;
						background-color: #E9FFFC;

						.txt {
							margin: 0 0 0 60rpx;
						}
					}
				}
			}

			// 时间
			.item-boxfor {
				margin-bottom: 128rpx;
			}

		}









		// 底部
		.footer {
			width: 100%;
			height: 128rpx;
			background-color: #fff;
			padding: 20rpx 0;
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;

			.btn {
				width: 676rpx;
				height: 84rpx;
				line-height: 84rpx;
				background-color: #01C3A8;
				color: #F3FFFE;
				font-size: 30rpx;
				border-radius: 42rpx;
			}

			button.btn::after {
				border: none;
			}
		}
	}
</style>
